<template>
  <div>
    <!-- <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" /> -->
    <div class="panel-container">
      <!-- <van-row type="flex" align="center" justify="space-between" @click="handleClick">
        <van-col><b class="L-text L-bold-text">{{itemdata.stitle}}</b></van-col>
        <van-col style="text-align:right">

          <van-icon name="arrow" />
        </van-col>
      </van-row> -->
      <!-- <van-row type="flex" align="center">
        <van-col span="24">
          <div class="echart-box" ref="chart"></div>
        </van-col>
      </van-row> -->
      <div class="echart-box" ref="chart"></div>
    </div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

const chart = ref(null);

onMounted(() => {
  initChart();
});

const show = ref(false);

function initChart() {
  const { itemdata } = props;

  let chartDom = chart.value;

  let myChart = echarts.init(chartDom);

  let options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    toolbox: {
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
      },
      right: 10,
    },
    legend: {
      data: [itemdata.snamearr[0], itemdata.snamearr[1]],
      left: 0,
    },
    xAxis: [
      {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: itemdata.snamearr[0] + "(" + itemdata.measurearr[0] + ")",
        offset: 1,
        axisLabel: {
          formatter: "{value}",
        },
        splitLine: {
          show: false,
        },
        minInterval: 1,
      },
      {
        type: "value",
        name: itemdata.snamearr[1] + "(" + itemdata.measurearr[1] + ")",
        offset: -9,
        axisLabel: {
          formatter: "{value}",
        },
        splitLine: {
          show: false,
        },
        minInterval: 1,
      },
    ],
    series: [
      {
        name: itemdata.snamearr[0],
        type: "bar",
        data: itemdata.value0arr,
      },
      {
        name: itemdata.snamearr[1],
        type: "line",
        yAxisIndex: 1,
        data: itemdata.value1arr,
      },
    ],
  };

  myChart.setOption(options);
}

function onSelect(item) {
  show.value = false;
}

function handleClick() {
  show.value = true;
}
</script>
<style  scoped>
.panel-container {
  box-sizing: border-box;
  padding: 10px 5px;
  /* background: #000; */
}

.echart-box {
  width: 100vw;
  height: 250px;
  /* border: 3px solid pink; */
  /* margin: 20px auto; */
}
</style>
